<!-- 模型预览 -->
<template lang="pug">
.full-wrap
    .file-tree(v-show="treeShow")
        .tree-tit 模型树
        cesiumViewTree(ref="cesiumViewTreeRef")
    cesiumView(ref="cesiumViewRef" @createSuccess="createSuccess")
</template>
<script setup>

import { Back } from '@element-plus/icons-vue'
import apis from '@/apis'
import { ref, onMounted, watch } from 'vue'
import { success, deleteConfirm, warning, confirm } from '@/utils/message'
import { useRouter, useRoute } from 'vue-router'
import { storageGet, getFileSize, createHash } from '@/utils'
import cesiumView from '@/components/cesiumView.vue'//三维
import cesiumViewTree from '@/components/cesiumViewTree.vue'//三维模型树

import image from './image/电压电流.png'

const cesiumViewRef = ref()
const cesiumViewTreeRef = ref()

const engDetails = ref({})//工程信息
const treeShow = ref(false)
const createSuccess = () => {
    window.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(114.7870, 40.7245, 50000),
        duration: 2.5
    })
}

onMounted(()=>{
    // engDetails.value = storageGet('engDetails')
    cyProjectPointqueryAllNotPage()
})
//获取模型坐标
let showList = []
let entityList = []
let entitiesClikcObj = {}//储存点击事件相关信息
const cyProjectPointqueryAllNotPage = () => {//打点
    entitiesClikcObj = {}
    apis.cyProjectPointqueryAllNotPage().then(res => {
        if(res.status == 1){
            showList = res.data.filter(val=>val.projectType == '0').filter(val=>val.stage == '0')//变电
            //打点
            showList.forEach(val => {
                let entity = window.viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(val.longitude, val.latitude),
                    billboard: {
                        image: image,
                        scale: 0.6, // 图标缩放比例
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 1e10),
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.TOP,
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        disableDepthTestDistance: Number.POSITIVE_INFINITY // 去掉地形遮挡
                    },
                    label: {
                        text: val.singleProjectName,
                        font: 'bold 14px sans-serif',
                        fillColor: Cesium.Color.WHITE, // 文字颜色
                        outlineColor: Cesium.Color.BLACK, // 文字边框颜色
                        outlineWidth: 2,
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 100000),
                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                        scale: 1.0, // 文字缩放比例
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 去掉地形遮挡
                        pixelOffset: new Cesium.Cartesian2(0, -10) // 文字偏移量
                    }
                })
                entitiesClikcObj[entity.id] = val
                entityList.push(entity)
            })

            handlerInit()
            cameraInit()
        }
    })
}
//视角监听
const cameraInit = () => {
    window.viewer.camera.changed.addEventListener(function(){
        let cameraHeight = viewer.camera.positionCartographic.height
        // console.log('Camera Height:', cameraHeight)
        if(cameraHeight > 5000){
            treeShow.value = false
            window.cesiumViewAttrClose && window.cesiumViewAttrClose()//模型属性关闭
        }
    })
}
//点击事件初始化
const handlerInit = () =>{
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
    handler.setInputAction(function(click){
        let pickedObject = viewer.scene.pick(click.position)
        if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)){
            // 在这里执行点击图标后的操作
            console.log('图标被点击了！', pickedObject.id, entitiesClikcObj[pickedObject.id.id])
            cesiumViewTreeRef.value.modelgetTreeStore({
                projectId: entitiesClikcObj[pickedObject.id.id].singleProjectId,
                stage: entitiesClikcObj[pickedObject.id.id].stage
            }, ()=>{
                getModelFilePath(entitiesClikcObj[pickedObject.id.id].singleProjectId)
            })

        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
//加载模型
const getModelFilePath = (singleProjectId) => {
    apis.getModelFilePath({
        mainId: singleProjectId
    }).then(res => {
        if(res.status == 1){
            if(res.data[0]){//初始化模型和模型树
                treeShow.value = true
                cesiumViewRef.value.addModel(res.data)
            }
        }
    })
}
</script>

<style lang="less" scoped>
.full-wrap{
    height:  calc(100% + 8px);
    margin: 0 -10px;
    position: relative;
}
.file-tree{
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
    background: rgba(0,0,0,.5);
    width: 320px;
    height: 97.5%;
    margin-right: 4px;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    .tree-tit{
        line-height: 30px;
        padding: 0 10px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
    }
    .trees-w{
        overflow: auto;
        flex-grow: 1;
        margin-bottom: 4px;
        padding: 10px;
    }
}
:deep(.el-tree){
    background: transparent;
    .label-wrap{
        color: #fff;
    }
    .el-tree-node__content:hover{
        background: rgba(255,255,255,.2);
    }
}
</style>
